import type { IPersonConfig } from '@/types/storeType'
import { rgba } from '@/utils/color'

export const useElementStyle = (element: any, person: IPersonConfig, index: number, patternList: number[], patternColor: string, cardColor: string, cardSize: { width: number, height: number }, textSize: number, mod: 'default' | 'lucky' | 'sphere' = 'default') => {
    if (patternList.includes(index + 1) && mod == 'default') {
        element.style.backgroundColor = rgba(patternColor, Math.random() * 0.2 + 0.8)
        // console.log('patternList---------', patternList);
        
        // 显示2025数字时，默认与高亮的字体样式设置
        element.children[0].style.color = `#e84c2c`
        element.children[1].style.color = `#a52a2a`
        element.children[2].style.color = `#6bbebe`
        
        
    }
    else if (mod == 'sphere' || mod == 'default') {
        // element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)
        // 球形时，字体的颜色样式设置
        if (mod == 'sphere') {
            // element.children[0].style.color = `#fdce7e`
            element.children[0].style.color = `#fcd084`
            // element.children[1].style.color = `#fde79c`
            element.children[1].style.color = `#fcf4c2`
            element.children[2].style.color = `#6bbebe`
            // element.style.backgroundColor = rgba('#fff176', Math.random() * 0.5 + 0.25)
            // element.style.backgroundColor = '#fdbd59'
            // element.style.backgroundColor = '#93240994'
            // element.style.backgroundColor = '#93240970'
            element.style.backgroundColor = '#9324095e'
            
            
            element.style.borderRadius = '15px'
            
        }
        if (mod == 'default') {
            element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)
        }
    }
    else if (mod == 'lucky') {
        // element.style.backgroundColor = rgba(cardColor, 0.8)
        element.style.backgroundColor = 'transparent'
    }
    element.style.border = `1px solid ${rgba(cardColor, 0.25)}`
    element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
    element.style.width = `${cardSize.width}px`;
    element.style.height = `${cardSize.height}px`;
    if (mod == 'lucky') {
        console.log('element-----', element);
        
        element.className = 'lucky-element-card'
        // 重新设置幸运抽奖卡片的样式
        // element.style.width = `580px`;
        // element.style.height = `620px`;
        element.style.border = 'none'
        element.style.boxShadow = 'none'
        element.style.backgroundImage = "url('../../log-lottery/public/card.png')";
        element.style.backgroundPosition = "center";
        element.style.backgroundRepeat = "no-repeat";
        element.style.backgroundSize = "100% 100%";
    }
    else {
        element.className = 'element-card'
        element.style.backgroundImage = 'none'
    }
    // 等比放大
    element.addEventListener('mouseenter', (ev: MouseEvent) => {
        const target = ev.target as HTMLElement
        if (mod == 'lucky') {
            target.style.border = `none`
            target.style.boxShadow = `none`
        } else {
            target.style.border = `1px solid ${rgba(cardColor, 0.75)}`
            target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.75)}`
        }
    })
    element.addEventListener('mouseleave', (ev: MouseEvent) => {
        const target = ev.target as HTMLElement
        if (mod == 'lucky') {
            target.style.border = `none`
            target.style.boxShadow = `none`
        } else {
            target.style.border = `1px solid ${rgba(cardColor, 0.25)}`
            target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
        }
        
    })
    // element.children[0].style.fontSize = textSize * 0.5 + 'px';
    // 工号 - 字体大小
    if (mod == 'lucky') {
        element.children[0].style.fontSize = `${textSize * 0.68}px`
    } else {
        element.children[0].style.fontSize = textSize * 0.9 + 'px';
    }
    
    if (person.uid) {
        element.children[0].textContent = person.uid;
    }

//   element.children[1].style.fontSize = `${textSize}px`
    // 名字 - 字体大小
    if (mod == 'lucky') {
        element.children[1].style.fontSize = `${textSize * 0.8}px`
        element.children[1].style.lineHeight = `${textSize * 2.3}px`
        element.children[1].style.textShadow = 'none'
        // element.children[1].style.textShadow = `-1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black`
    } else {
        element.children[1].style.fontSize = `${textSize * 1.15}px`
        element.children[1].style.lineHeight = `${textSize * 3}px`
        // element.children[1].style.textShadow = `0 0 12px ${rgba(cardColor, 0.95)}`
        element.children[1].style.textShadow = `none`
    }
//   element.children[1].style.lineHeight = `${textSize * 3}px`
//   element.children[1].style.textShadow = `0 0 12px ${rgba(cardColor, 0.95)}`
  if (person.name) {
    element.children[1].textContent = person.name
  }

//   element.children[2].style.fontSize = `${textSize * 0.5}px`
    // 部门
    if (mod == 'lucky') {
        element.children[2].style.fontSize = `${textSize * 0.7}px`
        element.children[2].style.textShadow = `none`
    } else {
        element.children[2].style.fontSize = `${textSize}px`
        element.children[2].style.textShadow = `none`
    }
  if (person.department || person.identity) {
    // element.children[2].innerHTML = `${person.department ? person.department : ''}<br/>${person.identity ? person.identity : ''}`
    element.children[2].innerHTML = `${person.department ? person.department : ''}`
  }

  return element
}

/**
 * @description 设置抽中卡片的位置
 * 最少一个，最大十个
 */
// TODO:不超过5个时：单行排列；超过5个时，6：上3下3；7：上3下4；8：上3下5；9：上4下5；10：上5下5
export const useElementPosition = (element: any, count: number, totalCount: number, cardSize: { width: number, height: number }, windowSize: { width: number, height: number }, cardIndex: number) => {
    let xTable = 0
    let yTable = 0
    const centerPosition = {
        x: 0,
        y: windowSize.height / 2 - cardSize.height / 2
    }
    // 有一行为偶数的特殊数量
    const specialPosition = [2, 4, 7, 9]
    // 不包含特殊值的 和 分两行中第一行为奇数值的
    if (!specialPosition.includes(totalCount) || (totalCount > 5 && cardIndex < 5)) {
        const index = cardIndex % 5
        if (index == 0) {
            xTable = centerPosition.x
            yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
        }
        else {
            xTable = index % 2 === 0 ? Math.ceil(index / 2) * (cardSize.width + 100) : -Math.ceil(index / 2) * (cardSize.width + 100)
            yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
        }
    }
    else {
        const index = cardIndex % 5
        if (index == 0) {
            xTable = centerPosition.x + (cardSize.width + 100) / 2
            yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
        }
        else {
            xTable = index % 2 === 0 ? Math.ceil(index / 2) * (cardSize.width + 100) + (cardSize.width + 100) / 2 : -(Math.ceil(index / 2) * (cardSize.width + 100)) + (cardSize.width + 100) / 2
            yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
        }
    }
    return { xTable, yTable }
}
